<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/stylesheets/main.css">
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
    <link href="https://cdn.staticfile.org/bootstrap-icons/1.10.3/font/bootstrap-icons.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/axios/1.3.4/axios.min.js"></script>
</head>
<body>
<div class="container ">
    <div class="module">
        <div class="row">
            <div class="col-md-10 offset-md-1">
                <div id="banner1" class="carousel slide" data-bs-ride="carousel">
                    <div id="banner-indicator" class="carousel-indicators">

                    </div>
                    <div id="banner-img" class="carousel-inner">

                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#banner1" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#banner1" data-bs-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="module">
        <div class="row">
            <div class="col-md-10 offset-md-1 ">
                <div class="row">
                    <div class="col-md-12 text-center ">
                        <span class="remen-text">热门歌单</span>
                        <nav class="nav justify-content-center" style="--bs-breadcrumb-divider:'|';margin: 0;"
                             aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><span onclick="useFuncJump('华语')">华语</span></li>
                                <li class="breadcrumb-item"><span onclick="useFuncJump('流行')">流行</span></li>
                                <li class="breadcrumb-item"><span onclick="useFuncJump('摇滚')">摇滚</span></li>
                                <li class="breadcrumb-item"><span onclick="useFuncJump('民谣')">民谣</span></li>
                                <li class="breadcrumb-item"><span onclick="useFuncJump('电子')">电子</span></li>
                            </ol>
                        </nav>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div id="highquality-playlist-01" class="col-6 highquality-playlist">
                            </div>
                            <div id="highquality-playlist-02" class="col-6 highquality-playlist">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div id="highquality-playlist-03" class="col-6 highquality-playlist">
                            </div>
                            <div id="highquality-playlist-04" class="col-6 highquality-playlist">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin-top:10px">
                    <div class="col-md-12 text-center ">
                        <span class="remen-text">新碟上架</span>
                    </div>
                </div>
                <div class="row" style="margin-top:15px">
                    <div class="col-md-6">
                        <div class="row">
                            <div id="newsong-01" class="col-4">
                            </div>
                            <div id="newsong-02" class="col-4">
                            </div>
                            <div id="newsong-03" class="col-4">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div id="newsong-04" class="col-4">
                            </div>
                            <div id="newsong-05" class="col-4 ">

                            </div>
                            <div id="newsong-06" class="col-4">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/javascripts/home.js"></script>
<script src="/javascripts/common.js"></script>
</body>
</html>
